<template>
  <view class="">
    <!-- 顶部导航 -->
    <fa-navbar title="登录"></fa-navbar>
    <view class="login">
      <image src="/static/image/logo.png" class="logo"></image>
      <view class="text-center text-xs u-m-t-28">华东共享会所联盟</view>
      <view class="text-center text-xs ">East China Shared Club Alliance</view>
      <view v-if="checkLogintype('mobile')">
        <view class="u-m-t-50">
          <u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType" v-if="loginType=='mobile'">
            <u-form-item :label-position="labelPosition" label="手机号码:" prop="mobile" label-width="120">
              <u-input :border="border" placeholder="请输入手机号码" v-model="form.mobile" type="number"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="验证码:" prop="captcha" label-width="120">
              <u-input :border="border" placeholder="请输入验证码" v-model="form.captcha" type="text"></u-input>
              <u-button hover-class="none" type="primary" slot="right"
                        :custom-style="{ background: theme.bgColor, color: theme.color }" size="mini" @click="getCode">
                {{ codeTips }}
              </u-button>
            </u-form-item>
          </u-form>
        </view>

<!--        <view class="u-m-t-40">
          <u-button hover-class="none" type="primary" v-if="loginType!='mobile'" :custom-style="{ background: theme.bgColor, color: theme.color }"
                     @click="loginType='mobile'">手机号登录
          </u-button>
          <u-button hover-class="none" v-if="loginType=='mobile'" type="primary"
                    :custom-style="{ background: theme.bgColor, color: theme.color }" shape="circle" @click="goLogin">登录
          </u-button>
        </view>-->
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <view class="u-text-center u-m-t-40" v-if="checkLogintype('wechatmobile')">
        <u-button hover-class="none" open-type="getPhoneNumber" type="primary"
                  :custom-style="{ background: theme.bgColor, color: theme.color }"
                  @getphonenumber="getPhoneNumber">
          微信登录
        </u-button>


      </view>
      <view class="u-m-t-20">
        <u-button hover-class="none"
                  @click="goPage('/pages/login/phonelogin')">手机号登录
        </u-button>

      </view>
      <!-- #endif -->

<!--      <view class="u-text-center u-m-t-40" v-if="checkLogintype('account')">
        <u-button hover-class="none" type="warning" shape="circle" @click="goPage('/pages/login/login')">用户名登录
        </u-button>
      </view>-->

<!--      <view class="u-text-center other" v-if="isThreeLogin && checkLogintype('wechat')">
        <u-grid :col="1" :border="false">
          <u-grid-item @click="goThreeLogin">
            <u-icon name="weixin-fill" color="#53c240" :size="50"></u-icon>
            <view class="grid-text">微信登录</view>
          </u-grid-item>
        </u-grid>
      </view>-->

    </view>

    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
    <u-toast ref="uToast"/>
  </view>
</template>

<script>
import {loginfunc} from '@/common/fa.mixin.js';

export default {
  mixins: [loginfunc],
  onLoad() {
    // #ifdef MP-WEIXIN || APP-PLUS
    this.isThreeLogin = true;
    // #endif

    // #ifdef H5
    if (this.$util.isWeiXinBrowser()) {
      this.isThreeLogin = true;
    }
    // #endif

    // 如果仅有账号登录一种方式则直接跳转至登录页
    if (this.checkLogintype('account') && this.vuex_config.logintypearr.length === 1) {
      this.$u.route({url: '/pages/login/login', type: 'redirectTo'});
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    if (this.checkLogintype('mobile')) {
      this.$refs.uForm.setRules(this.rules);
    }
  },
  data() {
    return {
      loginType: '',
      labelPosition: 'top',
      border: false,
      errorType: ['message'],
      form: {
        mobile: '',
        captcha: ''
      },
      rules: {
        mobile: [{
          required: true,
          message: '请输入手机号码',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur']
        },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur']
          }
        ],
        captcha: [{
          required: true,
          message: '请输入验证码',
          trigger: 'change'
        }]
      },
      isThreeLogin: false,
      codeTips: ''
    };
  },
  methods: {
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode: async function () {
      if (!this.$u.test.mobile(this.form.mobile)) {
        this.$u.toast('手机号码格式不正确！');
        return;
      }
      if (this.$refs.uCode.canGetCode) {
        let res = await this.$api.getSmsSend({
          mobile: this.form.mobile,
          event: 'mobilelogin'
        });
        setTimeout(() => {
          this.$u.toast(res.msg);
        }, 50);
        if (res.code == 1) {
          this.$refs.uCode.start();
        }
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    goThreeLogin: async function () {
      // #ifdef MP-WEIXIN
      this.goMpLogin();
      // #endif

      // #ifdef H5
      this.goAuth();
      // #endif

      // #ifdef APP-PLUS
      this.goAppLogin();
      // #endif
    },
    goLogin: function () {
      this.$refs.uForm.validate(async valid => {
        if (valid) {
          if (this.vuex_wx_uid) {
            this.form.wx_user_id = this.vuex_wx_uid;
          }
          let res = await this.$api.mobilelogin(this.form);
          if (!res.code) {
            this.$u.toast(res.msg);
            return;
          }
          this.$u.vuex('vuex_token', res.data.token);
          this.success();
        } else {
          this.$u.toast('验证失败');
        }
      });
    }
  }
};
</script>

<style>
page {
  background-color: #ffffff;
}

.login {
  padding: 80rpx 100rpx 0 100rpx;
}

.other {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 40rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  display: block;
  margin: auto;
  margin-top: 100rpx;
}
</style>